<template>
	<view>
		<view class="tabs_view">
			 <u-tabs :list="list1"
			 lineColor="#333"
			  :inactiveStyle="{
					color: '#999',
					transform: 'scale(1)',
					FontSize:'30rpx'
				}"
				
				 :activeStyle="{
				 	color: '#333',
				 	fontWeight: 'bold',
				 	transform: 'scale(1.05)',
				 	FontSize:'30rpx'
				 	
				 }"
				 lineHeight="2"
				 lineWidth="18"
				  @click="tabs_click"></u-tabs>
		</view>
		<scroll-view scroll-y="true" @scrolltolower="scrolltolower" :style="{height:scrollH+'px'}" class="scroll">
			<view class="list">
				<view class="list_item" v-for="(item,index) in list">
					<view class="list_item_top flex">
						<view class="list_item_top_left"> 
							{{item.title}}
						</view>
						<view class="list_item_top_right">
							<text class="list_item_top_right_icon">¥</text>{{item.price}}
						</view>
					</view>
					<view class="list_item_bottom flex">
						<view class="list_item_bottom_left flex1">
							<view class="list_item_bottom_left_item">
								{{item.mission.start_time}}发布
							</view>
							<view class="list_item_bottom_left_item">
								{{item.mission.expired_at}}到期
							</view>
						</view>
						<view class="list_item_bottom_right flex1" @click="go_detail(item.id)">
							<view class="list_item_bottom_right_text">
								任务详情
							</view>
							<u-icon name="arrow-right" color="#000" size="9"></u-icon>
						</view>
					</view>
				</view>
				<u-empty  mode="data" v-if="list.length == 0"></u-empty>
			</view>
		</scroll-view>
	</view>
</template>
<script>
import getScrollHeight from "@/utils/utils.js"
import {TaskClassification,getmission} from "@/api/common.js"
export default {
	data() {
		return {
			list1: [
				
			],
			list:[],
			scrollH:'',
			list_type:'',
			last_page:'',
			page:1,
		};
	},
	onReady() {
		let t = this
		getScrollHeight.getScrollHeight('scroll').then(res=>{
			t.scrollH = res - 15
		})	
	},
	onLoad() {
		this.get_type()
	},
	onShow() {
		let t = this;
		if(t.list.length!=0){
			t.list = []
			t.page = 1
			t.getlist(t.list_type)
		}
	},
	onPullDownRefresh() {
		let t = this;
		t.list = []
		t.page = 1
		t.getlist(t.list_type)
	},
	methods: {
		scrolltolower(){
			if(this.page < this.last_page){
				this.page++;
				this.getlist()
			}
		},
		tabs_click(e){
			let t = this
			t.list = []
			t.page = 1
			t.list_type = e.id
			t.getlist(t.list_type)
		},
		go_detail(id){
			let t = this
			let token = uni.getStorageSync('token')
			if(!token){
				uni.showToast({
					title:'请先登录',
					icon:'none'
				})
				setTimeout(()=>{
					uni.navigateTo({
						url:'/pages/ChooseName/ChooseName'
					})
				},1500)
				
				return false
			}
			uni.navigateTo({
				url:'/pages/TaskDetails/TaskDetails?id='+id+'&type=dating&stuts=0'
			})
		},
		get_type(){
			let t = this
			TaskClassification().then(res=>{
				console.log(res)
				if(res.code == 200001){
					t.list1 = res.data
					t.list_type = t.list1[0].id
					t.getlist(t.list_type)
				}
			})
		},
		getlist(type){
			let t = this
			getmission({
				type:type,
				page:t.page
			}).then(res=>{
				console.log(res)
				t.last_page = res.data.last_page
				t.list = [...t.list,...res.data.data]
				uni.stopPullDownRefresh();
			})
		}
	}
};
</script>

<style>
.tabs_view {
	width: 100%;
	height: 80rpx;
	border-bottom: 1rpx solid #f4f4f4;
}
.list{
	width: 100%;
}
.list_item{
	padding: 32rpx 30rpx;
	box-sizing: border-box;
	border-bottom: 1rpx solid #F4F4F4;
}
.list_item_top{
	width: 100%;
}
.list_item_top_left{
	color: #333;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 36rpx;
	font-weight: 400;
	
}
.flex{
	display: flex;
	justify-content: space-between;
	align-content: center;
}
.flex1{
	display: flex;
	align-content: center;
}
.list_item_bottom{
	width: 100%;
	margin-top: 20rpx;
}
.list_item_top_right{
	color: #E5432E;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 36rpx;
	font-weight: 700;
}
.list_item_top_right_icon{
	font-size: 24rpx;
}
.list_item_bottom_left_item{
	display: inline-flex;
	padding: 8rpx 16rpx;
	border-radius: 12rpx;
	border: 1rpx solid #E4E4E4;
	color: #999;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 20rpx;
	font-weight: 400;
	margin-right: 16rpx;
}
.list_item_bottom_right_text{
	color: #0165FB;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 26rpx;
	font-weight: 400;
	margin-right: 8rpx;
}
/deep/.u-empty{
	margin-top: 300rpx !important;
}
</style>
